<template>
    <van-tabs class="menu-wrap" v-model:active="path" @click-tab="onSwitchTab">
        <van-tab
            v-for="item in menus"
            :key="item.path"
            :title="item.title"
            title-class="nowrap"
            :name="item.path"
            :to="item.path"
        />
    </van-tabs>
</template>

<script>
import { ref, watch } from 'vue'
import { Tabs as VanTabs, Tab as VanTab } from 'vant'
export default {
  name: 'MenuBar',
  emits: ['select'],
  components: {
    VanTabs,
    VanTab
  },
  props: {
    menus: {
      type: Array
    },
    currentPath: {
      type: String
    }
  },
  setup(props, { emit }) {
    const path = ref('/')

    const onSwitchTab = params => {
      emit('select', params)
    }

    watch(() => props.currentPath, newVal => {
      path.value = newVal
    }, {
      immediate: true
    })        

    return {
      path,
      onSwitchTab
    }
  }
}
</script>

<style lang="scss" scoped>
  .menu-wrap{
    :deep .van-tabs__wrap {
      height: 40px;
    }
    :deep .van-hairline--top-bottom::after{
      border-top-width: 0;
    }
    :deep .van-tabs__line {
      background-color: $theme-color;
    }
    :deep .van-tab {
      font-size: 14px;
    }
    :deep .nowrap {
      white-space: nowrap;
    }
  }  
</style>